<div [class]="model.getRootCss(container)" [style.maxWidth]="model.progressWidth" 
role="progressbar" aria-valuemin="0" aria-valuemax="100" [attr.aria-label]="model.progressBarAriaLabel"
>
  <div *ngIf="canShowHeader" [class]="survey.css.progressButtonsHeader">
    <div [class]="survey.css.progressButtonsPageTitle" [title]="model.headerText">{{ model.headerText }}</div>
  </div>
  <div [class]="survey.css.progressButtonsContainer">
    <div
      [class]="model.getScrollButtonCss(hasScroller, true)"
      (click)="clickScrollButton(true)"
      role="button"
    ></div>
    <div
      [class]="survey.css.progressButtonsListContainer" #progressButtonsListContainer>
      <ul [class]="survey.css.progressButtonsList">
        <li
          *ngFor="let page of survey.visiblePages; index as index"
          [class]="model.getListElementCss(index)"
          (click)="model.isListElementClickable(index) ? model.clickListElement(page) : null"
          [attr.data-page-number]="model.getItemNumber(page)">
          <div [class]="survey.css.progressButtonsConnector"></div>
          <div *ngIf="canShowItemTitles"
            [class]="survey.css.progressButtonsPageTitle"
            [title]="page.renderedNavigationTitle"
          >
            <sv-ng-string [model]="page.locNavigationTitle"></sv-ng-string>
          </div>
          <div *ngIf="canShowItemTitles"
            [class]="survey.css.progressButtonsPageDescription"
            [title]="page.locNavigationDescription.renderedHtml"
          >
            {{ page.locNavigationDescription.renderedHtml }}
          </div>
          <div [class]="survey.css.progressButtonsButton"><div [class]="survey.css.progressButtonsButtonBackground"></div><div [class]="survey.css.progressButtonsButtonContent"></div><span>{{model.getItemNumber(page)}}</span></div>
        </li>
      </ul>
    </div>
    <div
      [class]="model.getScrollButtonCss(hasScroller, false)"
      (click)="clickScrollButton(false)"
      role="button"
    ></div>
  </div>
  <div *ngIf="canShowFooter" [class]="survey.css.progressButtonsFooter">
    <div [class]="survey.css.progressButtonsPageTitle" [title]="model.footerText">{{ model.footerText }}</div>
  </div>
</div>